<script setup>
const data = ref(createData())

function createData() {
  return [
    {
      label: nextLabel(),
      key: 1,
      isLeaf: false,
    },
    {
      label: nextLabel(),
      key: 2,
      isLeaf: false,
    },
  ]
}

function nextLabel(currentLabel) {
  if (!currentLabel)
    return 'Out of Tao, One is born'
  if (currentLabel === 'Out of Tao, One is born')
    return 'Out of One, Two'
  if (currentLabel === 'Out of One, Two')
    return 'Out of Two, Three'
  if (currentLabel === 'Out of Two, Three') {
    return 'Out of Three, the created universe'
  }
  if (currentLabel === 'Out of Three, the created universe') {
    return 'Out of Tao, One is born'
  }
  return ''
}

function handleLoad(node) {
  return new Promise((resolve) => {
    setTimeout(() => {
      node.children = [
        {
          label: nextLabel(node.label),
          key: node.key + nextLabel(node.label),
          isLeaf: false,
        },
      ]
      resolve()
    }, 10000)
  })
}
</script>

<template>
  <div class="simple-container">
    <n-card size="small" title="简单">
      <n-flex vertical>
        <n-tree :data="data" block-line expand-on-click :on-load="handleLoad" />
      </n-flex>
    </n-card>
  </div>
</template>
